@import 'variables'
@import 'nib'
@import 'mixins'

.view-result
  article.help, article.guide
    .panel-heading-info-icon
      float: right
      font-size: 1.3em
      color: #008cc1
      border: 0
      text-decoration: none
      .fa:focus
        text-decoration:none
        color: #008cc1
    background-color #fff
    padding 0
    padding: 30px
    margin 0
    &.no-data
      min-height: frame-min-height
      &.has-status-bar
        min-height: (frame-min-height - middlebar-height)
    [help-topic], [play-topic], [server-topic]
      background-color: #F8F8F8
      border-radius: 3px
      border: 1px solid #DADADA
      display: inline-block
      font-family: mono-font-family
      font-size: 12px
      line-height: 18px
      margin-bottom: 5px
      margin-right: 5px
      padding: 0 4px
    .btn-cta[help-topic], .btn-cta[play-topic], .btn-cta[server-topic]
      padding: 1em
      background-color: #008cc1
      color: #fff
    .teaser
      margin: .5em
      padding: 10px
      border: 1px solid #ccc
      border-radius: 4px
      height: 270px
      float: left
      position: relative
      &.teaser-3
        width: 30%
        min-width: 190px
        overflow: hidden
      button
        position: absolute
        bottom: 5px
        width: 90%
        left: 5%
        outline: none
      .icon
        float: left
        max-width: 67px
        width: 25%
        &.sl
          font-size: 35px
          &.green
            color: #65B144
          &.yellow
            color: #FDCC59
          &.red
            color: #FF5641
      .topic-bullets
        float: left
        word-wrap: break-word
        min-width: 100px
        max-width: 65%
        list-style: none
        padding-left: 10px
        margin-top: 0
        :first-child
          margin-top: 0
        li
          margin-top: 5px
      .icon-holder
        margin-top: 10px
        max-height: 120px
        overflow: hidden
    p
      font-size: 15px
      line-height: 1.428
      color: #666
      &.caption-cta
        margin: 0
        margin-top: 8px
    h1, h2, h3, h4, h5, dt
      background none
      display inline
      padding 0
    h1.subhead
      display block
      font-weight 100
      font-size 24px
    h2 span
      display block
      font-size 12pt
      font-style italic
    figure  {
      display: block;
      margin: 0;
      margin-bottom: 16px;
    }
    figcaption {
      padding: 0px;
      padding-bottom: 8px;
      font-size: 1em;
      font-style: italic
      font-weight: 300;
      border: none;
      background: transparent;
      word-wrap:normal;
      text-align: center;
    }
    pre.code
      background: #F3F3F3
      cursor: pointer
      border: 2px dashed #E1E1E8
      &:hover
        background: lighten(color-link, 80%)
        //outline: 2px solid color-link
      &.oneline
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      &.clicked
        border-style: solid
    &.manual
      section
      h1
        font-size 12pt
      h1 span
        display block
    ul, ol
      padding-left: 25px
      line-height: 1.428
    ul
      list-style: disc
      margin-top: 8px
    ul.list-unstyled
      list-style: none

    ul.big, ol.big
      padding-left: 40px
      font-size: 18px
      li
        line-height: 36px
    ul.undecorated
      padding: 0
      list-style: none

    .bg-warning
      padding: 10px

    form
      width: 100%
      .node, .relationship
        display: block
        width: 100%
        padding: 12px
        margin-left: auto
        margin-right: auto
        margin-bottom: 1em
      .node
        background-color: #525864
        border-radius(12px)
      .relationship
        background-color: #525864
        border-radius(2px)
      p, label, th
        color: #EEF1F8
